<script setup>
import { ref, onMounted } from 'vue'
import { useWardrobesStore } from '../stores/wardrobes'
import { ElMessage, ElMessageBox } from 'element-plus'
import { FolderOpened, Operation, View } from '@element-plus/icons-vue'

const store = useWardrobesStore()
const id = ref('')
const archiving = ref(false)
const batchArchiving = ref(false)
const batchDialogVisible = ref(false)
const isDesktop = ref(false)

async function archiveWardrobe() {
  if (!id.value) {
    ElMessage.error('请输入衣柜ID')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要归档衣柜 #${id.value} 吗？此操作不可撤销。`,
      '确认归档',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    archiving.value = true
    await store.archive(Number(id.value))
    ElMessage.success('衣柜归档成功！')
    id.value = ''
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('归档失败：' + error.message)
    }
  } finally {
    archiving.value = false
  }
}

function showBatchDialog() {
  batchDialogVisible.value = true
}

async function batchArchive() {
  try {
    batchArchiving.value = true
    // 这里可以实现批量归档逻辑
    ElMessage.success('批量归档功能开发中...')
    batchDialogVisible.value = false
  } catch (error) {
    ElMessage.error('批量归档失败：' + error.message)
  } finally {
    batchArchiving.value = false
  }
}

function viewPendingArchive() {
  ElMessage.info('查看待归档功能开发中...')
}

// 检测设备类型
function detectDevice() {
  const userAgent = navigator.userAgent.toLowerCase()
  const isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
  const isTablet = /tablet|ipad/i.test(userAgent)
  const screenWidth = window.innerWidth
  
  isDesktop.value = !isMobile && !isTablet && screenWidth > 1024
}

onMounted(() => {
  detectDevice()
  window.addEventListener('resize', detectDevice)
})
</script>

<template>
  <div class="archive-container" :class="{ 'desktop': isDesktop }">
    <div class="page-header">
      <h1>📁 存档 - 完成归档</h1>
      <p>将已完成的衣柜项目进行最终存档</p>
    </div>

    <el-card class="form-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">衣柜归档</span>
          <el-tag type="success" size="small">最终状态</el-tag>
        </div>
      </template>

      <div class="archive-content">
        <div class="archive-description">
          <el-alert
            title="归档说明"
            type="success"
            :closable="false"
            show-icon
            class="archive-alert"
          >
            <template #default>
              <p>归档操作将把衣柜状态从"待存档"变更为"已存档"，表示该项目已完全结束。</p>
              <p>归档后的衣柜将进入历史记录，可以查看完整的生命周期信息。</p>
            </template>
          </el-alert>
        </div>

        <div class="archive-form">
          <el-form label-width="120px">
            <el-form-item label="衣柜ID" required>
              <div class="input-group">
                <el-input 
                  v-model="id" 
                  placeholder="请输入需要归档的衣柜ID"
                  class="archive-input"
                  size="large"
                />
                <el-button 
                  type="success" 
                  size="large"
                  @click="archiveWardrobe"
                  :loading="archiving"
                  class="archive-btn"
                >
                  <el-icon><FolderOpened /></el-icon>
                  确认归档
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="archive-tips">
          <h4>📋 归档前请确认：</h4>
          <ul>
            <li>✅ 衣柜已成功安装完成</li>
            <li>✅ 所有费用已结算完毕</li>
            <li>✅ 客户已确认满意</li>
            <li>✅ 相关文档已整理完成</li>
          </ul>
        </div>
      </div>
    </el-card>

    <el-card class="form-card" shadow="hover" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span class="card-title">批量归档</span>
          <el-tag type="warning" size="small">批量操作</el-tag>
        </div>
      </template>

      <div class="batch-archive">
        <p class="batch-desc">如果有多个待存档的衣柜，可以批量处理：</p>
        <div class="batch-actions">
          <el-button 
            type="primary" 
            @click="showBatchDialog"
            class="batch-btn"
          >
            <el-icon><Operation /></el-icon>
            批量归档
          </el-button>
          <el-button 
            type="info" 
            @click="viewPendingArchive"
            class="batch-btn"
          >
            <el-icon><View /></el-icon>
            查看待归档
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 批量归档对话框 -->
    <el-dialog
      v-model="batchDialogVisible"
      title="批量归档"
      width="500px"
      class="batch-dialog"
    >
      <div class="batch-dialog-content">
        <p>确定要将所有待存档的衣柜进行归档吗？</p>
        <p class="warning-text">⚠️ 此操作不可撤销，请谨慎操作！</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="batchDialogVisible = false">取消</el-button>
          <el-button 
            type="success" 
            @click="batchArchive"
            :loading="batchArchiving"
          >
            确认批量归档
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.archive-container {
  max-width: 1000px;
  margin: 0 auto;
}

.archive-container.desktop {
  max-width: none;
  margin: 0;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.page-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-header p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.form-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #303133;
}

.archive-content {
  padding: 20px 0;
}

.archive-description {
  margin-bottom: 30px;
}

.archive-alert {
  border-radius: 8px;
}

.archive-alert p {
  margin: 5px 0;
  line-height: 1.5;
}

.archive-form {
  margin-bottom: 30px;
}

.input-group {
  display: flex;
  gap: 15px;
  align-items: center;
}

.archive-input {
  flex: 1;
}

.archive-btn {
  padding: 12px 30px;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(103, 194, 58, 0.3);
  transition: all 0.3s ease;
}

.archive-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(103, 194, 58, 0.4);
}

.archive-tips {
  background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid #67c23a;
}

.archive-tips h4 {
  margin: 0 0 15px 0;
  color: #67c23a;
  font-size: 1.1rem;
}

.archive-tips ul {
  margin: 0;
  padding-left: 20px;
}

.archive-tips li {
  margin-bottom: 8px;
  color: #606266;
  line-height: 1.4;
}

.batch-archive {
  padding: 20px 0;
}

.batch-desc {
  color: #606266;
  margin-bottom: 20px;
  text-align: center;
}

.batch-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.batch-btn {
  padding: 12px 25px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.batch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.batch-dialog-content {
  text-align: center;
}

.warning-text {
  color: #e6a23c;
  font-weight: 600;
  margin-top: 15px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .input-group {
    flex-direction: column;
    gap: 15px;
  }
  
  .archive-input {
    width: 100%;
  }
  
  .archive-btn {
    width: 100%;
    padding: 15px 20px;
  }
  
  .batch-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .batch-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.8rem;
  }
  
  .page-header p {
    font-size: 1rem;
  }
  
  .form-card {
    margin: 0 10px;
  }
  
  .archive-content {
    padding: 15px 0;
  }
  
  .archive-tips {
    padding: 15px;
  }
}
</style>


